<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.引入 vue3 源代码 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 2. 准备容器 -->
    <div id="app">
      <!-- 4. 渲染数据 -->
      <h1>{{ msg }}</h1>
      <p>我叫 {{ obj.name }}, 今年 {{ obj.age}} 岁了</p>
      <p>{{ obj.age >= 18 ? '已成年' : '未成年'}}</p>
      <p>fn 的返回值 = {{ fn() }}</p>
      <p>{{ msg }} 由 {{ msg.split(' ').length }} 个单词组成</p>
    </div>
    <script>
      // 3. 创建 vue3 应用并提供数据
      Vue.createApp({
        // vue3 代码的入口函数
        setup() {
          const msg = "hello world";
          const obj = {
            name: "jack",
            age: 9,
          };
          const fn = () => {
            return 666;
          };
          return {
            msg,
            obj,
            fn,
          };
        },
      }).mount("#app"); // 把内容喧嚷到 id = app 的盒子里
    </script>
  </body>
</html>
